<template>
  <view class="welfare-layout">
    <!--  头部区域  -->
    <my-header background-color="transparent" :fit-weixin="false" title="福利屋">
      <template v-slot:menu>
        <text @click="showRuleDialog" class="welfare-rule">规则</text>
      </template>
    </my-header>
    <!--  主内容区域  -->
    <my-content class="content">
      <!--   搜索栏   -->
      <view class="search">
        <input
          class="code"
          type="text"
          placeholder="请输入活动口令"
          v-model="word_command"
          @keyup.enter="searchHouse"
        />
        <image class="clear" @click="clearCommand" v-if="word_command" src="https://www.dingxians.cn/upload/images/box/close.png"></image>
        <text class="search-btn" @click="searchHouse">搜索</text>
      </view>
      <!--   tab栏   -->
      <my-tab :margin="30" start v-model="tabPosition" @input="onTabChange" :tab-list="tabList"></my-tab>
      <scroll-view
        scroll-y="true"
        class="scroll-view"
        @scrolltolower="onLoadMore"
        @refresherrefresh="onRefreshData"
        refresher-background=""
        :refresher-enabled="true"
        :refresher-triggered="isLoading"
      >
        <!--  房间列表    -->
        <view class="house-list">
          <my-house
            v-for="item in houseList"
            :key="item.id"
            :disabled="tabPosition === 1"
            :btn-text="btnText"
            :house="item"
            @btnClick="header('/packageA/welfare/detail?id=' + item.id, 1, true)"
          ></my-house>
        </view>
      </scroll-view>

      <!--  底部操作按钮区域    -->
      <view class="actions">
        <view class="action-item" @click="header('/packageA/welfare/joinHistory', 1, true)">
<!--          <image class="action-icon" src="/static/images/welfare/ic-join-history.png"></image>-->
          <text class="action-name">参与记录</text>
        </view>
        <!--   非主播无法创建房间     -->
        <view class="action-item" @click="header('/packageA/welfare/create', 1, true)" v-if="is_anchor">
<!--          <image class="action-icon" src="/static/images/welfare/ic-create-house.png"></image>-->
          <text class="action-name">创建房间</text>
        </view>
        <view class="action-item" @click="header('/packageA/welfare/createHistory', 1, true)" v-if="is_anchor">
<!--          <image class="action-icon" src="/static/images/welfare/ic-create-history.png"></image>-->
          <text class="action-name">创建记录</text>
        </view>
      </view>

      <!--  福利屋规则弹窗    -->
      <my-alert-dialog ref="popup" class="popup" title="规则">
        <view class="popup-content">
          <view>1.开箱福利屋为官方福利活动房间。在开放时间内，达到房间进场要求即可进入房间。</view>
          <view>2.用户创建福利屋需官方审核，审核通过即可开放。</view>
          <view>3.福利屋开奖时，房间无人参与，视为福利屋开奖失败福利屋会自动关闭，快邀请您的好友一起来参加福利吧</view>
          <view>4.福利屋开奖获得的赏品会直接下发至仓库，请注意查收。</view>
          <view>5.开奖的前一天截止报名</view>
        </view>
      </my-alert-dialog>
    </my-content>
  </view>
</template>

<script>
import api from '@/api'

export default {
  data() {
    return {
      // tab列表
      tabList: [{id: 0, title: '进行中'}, {id: 1, title: '已结束'}],
      // 当前tab选中的位置
      tabPosition: 0,
      /*pages: [
        { page: 1, lastPage: 1, houseList: [], isLoading: false },
        { page: 1, lastPage: 1, houseList: [], isLoading: false },
      ],*/
      // 当前页码
      page: 1,
      // 最后页码
      lastPage: 1,
      // 是否是主播，1表示是主播，0不是
      is_anchor: 0,
      // 房间列表
      houseList: [],
      // 是否正在刷新加载
      isLoading: false,
      // 房间口令，用于搜索房间
      word_command: '',
    }
  },
  onLoad() {
    this.onRefreshData()
  },
  onShow() {
    // this.onRefreshData()
  },
  watch: {
    // 侦听输入口令内容的改变，如果口令被清空了，则调用searchHouse方法重新加载数据
    word_command(newVal) {
      if (!newVal) {
        this.searchHouse()
      }
    },
  },
  methods: {
    // 清空口令
    clearCommand() {
      this.word_command = ''
      // this.searchHouse()
    },
    // 搜索房间
    searchHouse() {
      this.onRefreshData()
    },
    // tab栏位置发生改变时
    onTabChange(index) {
      this.houseList = []
      this.onRefreshData()
    },
    // 获取房间列表数据
    async getHouseList() {
      try {
        await uni.showLoading()
        const result = await api.welfareHouses.index({
          status: this.tabPosition + 1, // 状态： 1表示进行中，2表示已结束
          page: this.page, // 页码
          word_command: this.word_command, // 口令,用于搜索
        })
        if (result.code === 200) {
          this.lastPage = result.data.last_page // 页尾
          this.is_anchor = result.data.is_anchor // 是否是主播
          if (this.page === 1) {
            // 第一页的话直接赋值
            this.houseList = result.data.data
          } else {
            // 第二页进行拼接到最后
            this.houseList.push(...result.data.data)
          }
        } else {
          throw new Error('加载失败了')
        }
      } catch (e) {
        await uni.showToast({ icon: 'none', title: e.message })
      } finally {
        uni.hideLoading()
        this.isLoading = false
      }
    },
    showRuleDialog() {
      this.$refs.popup.show()
    },
    // 上拉加载更多
    onLoadMore() {
      // 当前页码和页尾相同，不加载更多
      if (this.page >= this.lastPage) return
      this.page++
      this.getHouseList()
    },
    // 下拉刷新
    onRefreshData() {
      // this.lastPage = 1
      // this.houseList = []

      // 下拉刷新，需要判断当前状态，否则数据将会加载两次
      if (!this.isLoading) {
        this.page = 1
        this.lastPage = 1
        this.isLoading = true
        this.getHouseList()
      }
    },
  },
  computed: {
    btnText() {
      return this.tabPosition === 0 ? '加入房间' : '已结束'
    },
  },
}
</script>

<style lang="scss" scoped>
.welfare-layout {
  height: 100vh;
  width: 100%;
  background-size: 100% 100%;
  background-image: url('https://www.dingxians.cn/upload/images/common/bg.png');

  .logo {
    width: 520rpx;
    height: 116rpx;
  }

  .welfare-rule {
    width: 56rpx;
    height: 56rpx;
    /* #ifdef MP-WEIXIN */
    visibility: hidden;
    /* #endif */
  }

  .content {
    height: 100vh;
    width: 100%;

    .search {
      width: 712rpx;
      height: 70rpx;
      margin: 40rpx auto 0;
      display: flex;
      align-items: center;
      color: white;
      background: rgba(0,0,0,0.37);
      box-shadow: inset 0 0 22rpx 0 rgba(0,220,255,0.45);
      border-radius: 14rpx 14rpx 14rpx 14rpx;
      border: 1rpx solid #00DCFF;

      .code {
        flex: 1;
        margin: 0 20rpx;
      }

      .clear {
        width: 40rpx;
        height: 40rpx;
        margin-right: 10rpx;
      }

      .search-btn {
        margin-right: 20rpx;
      }
    }

    .scroll-view {
      width: 100%;
      flex: 1;
      overflow: hidden;

      .house-list {
        box-sizing: border-box;
        height: 100%;
        width: 710rpx;
        margin: 10rpx auto 25rpx;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        justify-content: space-between;
      }
    }

    .actions {
      margin: 0 45rpx;
      height: 120rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .action-item {
        &:nth-child(2) {
          margin-left: 60rpx;
          margin-right: 60rpx;
        }

        display: flex;

        .action-icon {
          width: 35rpx;
          height: 35rpx;
        }

        .action-name {
          margin-left: 15rpx;
          font-size: 28rpx;
          color: white;
        }
      }
    }

    .popup {
      z-index: 8888;

      .popup-content {
        box-sizing: border-box;
        color: white;
        background-size: 100% 100%;
        padding: 30rpx 40rpx 30rpx 40rpx;
      }
    }
  }
}
</style>
